<template>
  <view class="home">
    <MyNav class="mynav" v-if="isShowNav"></MyNav>
    <view class="swiper">
      <u-swiper
        :list="swiper_Arr"
        radius="0"
        height="240"
        :indicator="true"
        indicatorMode="dot"
        imgMode="heightFix"
        :displayMultipleItems="1"
      >
      </u-swiper>
      <!-- 个人信息卡片 -->
      <view class="card flex-center">
        <image
          src="https://xddserver.oss-cn-guangzhou.aliyuncs.com/blog/avatarImage/1728544800618_8800.webp"
          mode=""
        ></image>
        <div class="typewriter">
          <text class="nickname">茶冢</text>
          <view class="textContent"
            >{{ displayedText }}<text class="cursor"></text
          ></view>
        </div>
      </view>
    </view>
    <view class="home-content">
      <!-- 分类 -->
      <view class="kind flex-wrap">
        <view
          class="list flex-column"
          v-for="(item, index) in kind_Arr"
          :key="index"
          @click="handleClick(item.path)"
        >
          <image :src="item.imageUrl" mode=""></image>
          <text>{{ item.text }}</text>
        </view>
      </view>
    </view>

    <view class="content">
      <view class="title">广场</view>
      <template>
        <custom-waterfalls-flow :value="leftList">
          <view
            class="item"
            v-for="(item, index) in leftList"
            :key="index"
            slot="slot{{index}}"
          >
            <view class="item-t">{{ item.title }}</view>
            <view class="item-ct flex">
              <view class="info flex-align">
                <image :src="item.avatar" mode=""></image>
                <text>{{ item.nickname }}</text>
              </view>
              <view class="like flex-align">
                <u-icon
                  :name="item.isLike ? 'thumb-up-fill' : 'thumb-up'"
                  color="#ffca2a"
                  size="20"
                  @click="handLike(index)"
                ></u-icon>
                {{ item.like }}</view
              >
            </view>
          </view>
        </custom-waterfalls-flow>
      </template>
    </view>
  </view>
</template>

<script setup>
import { useCounterStore } from '@/store/counter.js'
import { onLoad, onPageScroll, onReady } from '@dcloudio/uni-app'
import { onMounted, ref, reactive } from 'vue'
import { locaImgs } from '@/utils/imgs.js'
import MyNav from '@/components/myNav.vue'
const store = useCounterStore()
const isShowNav = ref(false)
const swiper_Arr = ref([
  'https://ts1.cn.mm.bing.net/th/id/R-C.250cc46ae9ddda4eefc3296de4c0d033?rik=ERt6ptSIvVSvHQ&riu=http%3a%2f%2fimg.netbian.com%2ffile%2f2023%2f0912%2f1608488ibYM.jpg&ehk=kT5YlgzovsFTPAlqak8teKVW9M8o2J3%2fHEk9AliLmOs%3d&risl=&pid=ImgRaw&r=0',
  'https://pic.20988.xyz/2024-07-05/1720145459-937806-wallpaperenginelockoverride.jpg',
  'https://pic.20988.xyz/2024-05-29/1716947217-167598-3.jpg',
  'https://pic.20988.xyz/2024-05-29/1716947219-264223-4.jpg'
])

onMounted(() => {
  typeText('十八岁以后我的梦想变成了买车买房')
})

const kind_Arr = ref([
  {
    imageUrl: locaImgs('picture'),
    text: '精美图片',
    path: 'pagesA/picture/index'
  },
  {
    imageUrl: locaImgs('rli'),
    text: '摸鱼日报',
    path: 'pagesA/calendar/index'
  },
  {
    imageUrl: locaImgs('chigua'),
    text: '吃瓜日报',
    path: 'pagesA/calendar/eatmelon'
  },

  {
    imageUrl: locaImgs('news'),
    text: '新闻简报',
    path: 'pagesA/calendar/news'
  },
  {
    imageUrl: locaImgs('xingzuo'),
    text: '星座运势',
    path: 'pagesA/calendar/starsign'
  }
])
const leftList = ref([
  {
    image: 'https://pic.20988.xyz/2024-05-29/1716947219-264223-4.jpg',
    title: '测试一条',
    avatar: store.userInfo.avatarUrl,
    nickname: store.userInfo.userName,
    like: 12,
    isLike: false
  },
  {
    image:
      'https://xddserver.oss-cn-guangzhou.aliyuncs.com/blog/AppMobile/1729666800868_7608.webp',
    title: '这背影，迷死了多少男孩子',
    avatar: store.userInfo.avatarUrl,
    nickname: store.userInfo.userName,
    like: 12,
    isLike: true
  },
  {
    image:
      'https://xddserver.oss-cn-guangzhou.aliyuncs.com/blog/viewMobile/78634_1654191630.jpg',
    title: '这背影，迷死了多少男孩子',
    avatar: store.userInfo.avatarUrl,
    nickname: store.userInfo.userName,
    like: 12,
    isLike: true
  }
])
// 用于显示逐渐显示的文字
const displayedText = ref('')

// 打字速度（以毫秒为单位）
const typingSpeed = 100
// 打字动画逻辑
const typeText = (text) => {
  displayedText.value = ''
  let currentIndex = 0
  const intervalId = setInterval(() => {
    if (currentIndex < text.length) {
      displayedText.value += text[currentIndex]
      currentIndex++
    } else {
      clearInterval(intervalId) // 当打字完成后，清除定时器
    }
  }, typingSpeed)
}
// 点击分类
const handleClick = (path) => {
  uni.navigateTo({ url: `../../${path}` })
}
// 点赞
const handLike = (index) => {
  leftList.value[index].isLike = !leftList.value[index].isLike
}
// 监听页面滚动
onPageScroll((e) => {
  if (e.scrollTop >= 192) {
    isShowNav.value = true
  } else {
    isShowNav.value = false
  }
})
</script>
<style>
page {
  background-color: #f8f8f8 !important;
}
</style>
<style lang="scss" scoped>
.home {
  position: relative;

  ::v-deep .uni-searchbar {
    padding: 0;
    width: 70%;
    margin-left: 32rpx;
  }

  .mynav {
    width: 100%;
    position: absolute;
    z-index: 999;
  }

  .uni-swiper-dot-box {
    width: 100%;
    .swiper-box {
      image {
        width: 100%;
        height: 100%;
      }
    }
  }
  .swiper {
    position: relative;
    .card {
      position: absolute;
      width: 90%;
      height: 160rpx;
      top: 102%;
      left: 50%;
      transform: translate(-50%, -50%);
      backdrop-filter: blur(5px);
      border-radius: 16rpx;
      box-shadow: 0 0 20rpx rgba(255, 252, 252, 0.8),
        0 0 40rpx rgba(255, 255, 255, 0.6), 0 0 60rpx rgba(255, 255, 255, 0.4);
      image {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
      }
      .typewriter {
        font-size: 32rpx;
        white-space: pre;
        /* background: rgba(0, 0, 0, 0.2); */
        border-radius: 20rpx;
        padding: 8rpx;
        width: fit-content;
        cursor: pointer;
        white-space: pre-wrap; /* 允许文本自动换行 */
        margin-left: 16rpx;
        .nickname {
          color: #fb4a3e;
          font-size: 32rpx;
        }
        .textContent {
          width: 100%;
        }
        /* 闪烁光标效果 */
        .cursor {
          display: inline-block;
          width: 4rpx; /* 光标的宽度 */
          height: 1em; /* 设置光标的高度等于字体的高度 */
          background-color: #666666; /* 光标的颜色 */
          vertical-align: middle; /* 对齐到文本底部 */
          animation: blink 0.8s infinite;
        }
        @keyframes blink {
          0%,
          100% {
            opacity: 1;
          }
          50% {
            opacity: 0;
          }
        }
      }
    }
  }
  .home-content {
    margin-top: 84rpx;
    margin-bottom: 40rpx;
    .kind {
      background-color: #ffffff;
      padding: 20rpx 0;
      border-radius: 20rpx;

      .list {
        width: calc(90% / 4);
        align-items: center;
        margin-bottom: 18rpx;

        image {
          width: 68rpx;
          height: 68rpx;
        }

        text {
          margin-top: 8rpx;
          color: #666666;
          font-size: 28rpx;
        }
      }
    }
  }
  .content {
    width: 100%;
    padding: 10rpx 24rpx;
    box-sizing: border-box;
    .title {
      position: relative;
      font-size: 32rpx;
      color: #90a4ae;
      margin-bottom: 10rpx;
      margin-left: 50rpx;
      &::before {
        position: absolute;
        content: '';
        display: inline-block;
        width: 10rpx;
        height: 40rpx;
        border-radius: 8rpx;
        background-color: #fb4a3e;
        top: 0;
        left: -40rpx;
      }
    }
    .item {
      background-color: #ffffff;
      padding: 10rpx 10rpx;
      .item-t {
        font-size: 28rpx;
        font-weight: bold;
        color: #333;
        margin-top: 10rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
      .item-ct {
        margin-top: 10rpx;
        font-size: 24rpx;
        .info {
          image {
            width: 60rpx;
            height: 60rpx;
            border-radius: 50%;
            margin-right: 8rpx;
          }
        }
        .like {
        }
      }
    }
  }
}
</style>
